<script setup lang="ts">
import { computed, ref } from 'vue';
import { REALM_LEVEL_LIST } from '../../../../game/data/realm';
import {
  ATTRIBUTE_TYPE,
  ATTRIBUTE_TYPE_ORDER,
  type AttributeType,
} from '../../../../game/model/attributes/type';
import { AttributesReader } from '../../../../game/systems/attributes/reader';
import { ENEMY_DATA } from '../../../../game/data/enemy';
import { CombatAttributes } from '../../../../game/model/attributes/combat-attributes';
import type { ValueType } from 'ant-design-vue/es/input-number/src/utils/MiniDecimal';

const attrs = new CombatAttributes({
  mode: 'level',
  levelBasedConfig: {
    baseAttributes: {
      [ATTRIBUTE_TYPE.HEALTH]: 110,
      [ATTRIBUTE_TYPE.ATTACK]: 17,
      [ATTRIBUTE_TYPE.DEFENSE]: 16,
      [ATTRIBUTE_TYPE.SPEED]: 1.1,
    },
    growthFactors: {
      [ATTRIBUTE_TYPE.HEALTH]: 8,
      [ATTRIBUTE_TYPE.ATTACK]: 1.1,
      [ATTRIBUTE_TYPE.DEFENSE]: 1.4,
      [ATTRIBUTE_TYPE.SPEED]: 0.05,
    },
    initialLevel: 1,
  },
});

const realmOptions = REALM_LEVEL_LIST.map((item, index) => {
  return {
    label: item.name,
    value: index,
    raw: item,
  };
});
const enemyOptions = ENEMY_DATA.map((item, index) => {
  return {
    label: item.name,
    value: index,
    raw: item,
  };
});

const level = ref(1);
const realm = ref(0);
const enemy = ref(0);
const currentEnemy = computed(() => {
  return enemyOptions?.[enemy.value]?.raw;
});
const finalAttributes = computed(() => {
  attrs.setBattleLevel(level.value);
  const realmConfig = realmOptions?.[realm.value]?.raw;
  if (realmConfig) {
    attrs.setRealm(realmConfig.bigLevelType, realmConfig.smallLevel);
  }
  const enemyConfig = enemyOptions?.[enemy.value]?.raw;
  if (enemyConfig) {
    attrs.setAttributesConfig(enemyConfig.attributesConfig);
  }
  const final = attrs.getAttributeSnapshot().final;
  const sortedProps = Array.from(Object.keys(final) as AttributeType[]).sort(
    (a, b) => {
      const indexA = ATTRIBUTE_TYPE_ORDER.indexOf(a);
      const indexB = ATTRIBUTE_TYPE_ORDER.indexOf(b);

      // 如果都在排序列表中，按列表顺序
      if (indexA !== -1 && indexB !== -1) {
        return indexA - indexB;
      }
      // 如果只有一个在列表中，在列表中的排在前面
      if (indexA !== -1) return -1;
      if (indexB !== -1) return 1;
      // 都不在列表中，按字母顺序
      return a.localeCompare(b);
    }
  );
  return sortedProps.map((prop) => {
    return {
      prop,
      name: AttributesReader.getAttributeName(prop),
      value: final[prop],
    };
  });
});

function handleLevelInput(value: ValueType) {
  if (value === '' || value === null || value === undefined) {
    level.value = 1;
  }
}

function onLevelDownClick() {
  if (level.value <= 1) return;
  level.value -= 1;
}

function onLevelUpClick() {
  level.value += 1;
}

function filterOption(input: string, option: any) {
  return option.raw.name.includes(input);
}
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <div class="flex-none p-2 flex flex-col gap-2">
      <div class="flex items-center gap-2">
        <div class="flex-none">敌人名称:</div>
        <div class="flex-1">
          <a-select
            v-model:value="enemy"
            class="w-full"
            :options="enemyOptions"
            :show-search="true"
            :filter-option="filterOption"
          ></a-select>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <div class="flex-none">修炼境界:</div>
        <div class="flex-1">
          <a-select
            v-model:value="realm"
            class="w-full"
            :options="realmOptions"
            :show-search="true"
            :filter-option="filterOption"
            :disabled="
              currentEnemy && currentEnemy.attributesConfig.mode === 'fixed'
            "
          ></a-select>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <div class="flex-none">战斗等级:</div>
        <div class="flex-none">
          <a-button
            :disabled="
              currentEnemy && currentEnemy.attributesConfig.mode === 'fixed'
            "
            @click="onLevelDownClick"
          >
            减
          </a-button>
        </div>
        <div class="flex-1">
          <a-input-number
            v-model:value="level"
            style="width: 100%"
            :min="1"
            :disabled="
              currentEnemy && currentEnemy.attributesConfig.mode === 'fixed'
            "
            @change="handleLevelInput"
          ></a-input-number>
        </div>
        <div class="flex-none">
          <a-button
            :disabled="
              currentEnemy && currentEnemy.attributesConfig.mode === 'fixed'
            "
            @click="onLevelUpClick"
          >
            加
          </a-button>
        </div>
      </div>
    </div>
    <div class="flex-1 overflow-auto p-2">
      <div class="grid grid-cols-2">
        <div
          v-for="item in finalAttributes"
          :key="item.prop"
          class="flex items-center"
        >
          <div>{{ item.name }}: {{ Math.floor(item.value) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
